<template>
  <div>
    <div style="margin-bottom: 5px">
         <!-- 专业id -->
      <el-input
        v-model="postId"
        @keyup.enter.native="queryId"
        placeholder="请输入帖子id"
        suffix-icon="el-icon-search"
        style="width: 190px; margin-left: 5px"
      ></el-input>
            <!--      查询按钮-->
            <el-button type="primary" style="margin-left: 5px" @click="queryId">id查询</el-button>
            <!--      重置按钮-->
            <el-button type="success" @click="resetParam">重置</el-button>
        </div>
      <!--    列表展示-->
      <el-table :data="parentAll" :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }">
          <el-table-column prop="id" label="id" width="200" header-align="center"> </el-table-column>
          <el-table-column prop="userName" label="用户名称" width="80"></el-table-column>
          <el-table-column prop="userId" label="用户id" width="200"></el-table-column>
          <el-table-column prop="postId" label="帖子id" width="200">
          </el-table-column>
          <el-table-column label="评论图片" width="200" header-align="center">
              <template slot-scope="scope">
                  <el-image style="width: 200px; height: 50px" :src="scope.row.contentImage" fit="contain"
                      :preview-src-list="[scope.row.contentImage]"></el-image>
              </template>
          </el-table-column>
          <el-table-column prop="content" label="内容" width="200" header-align="center"></el-table-column>
          <el-table-column prop="isPrivate" label="是否公开" width="80">
              <template slot-scope="scope">
                  <el-tag :type="scope.row.gender === false ? 'primary' : 'success'" disable-transitions>{{
                      scope.row.gender === false ? "未公开" : "已公开" }}</el-tag>
              </template>
          </el-table-column>
          <el-table-column prop="gmtCreate" label="创建时间" width="140">
          </el-table-column>
          <el-table-column prop="operate" label="操作">
              <template slot-scope="scope">
                  <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
                      title="这是一段内容确定删除吗？" @confirm="del(scope.row.id)" style="margin-left: 5px">
                      <el-button slot="reference" size="small" type="danger">删除</el-button>
                  </el-popconfirm>
              </template>
          </el-table-column>
      </el-table>

      <!--    分页  -->
      <div class="pagination-wrapper">
          <div class="pagination-container">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="page" :page-sizes="[5, 10, 20, 30]" :page-size="5"
                  layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
          </div>
      </div>
  </div>
</template>

<script>
import { queryId } from "@/api/q&aService/fatherComment/queryId";
import {  del } from "@/api/q&aService/fatherComment/del";
import { queryAll } from "@/api/q&aService/fatherComment/queryAll";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "fatherComment",
  data() {
      return {
        parentAll: [],
          form: {
            id:'',
            postId: "",
          },
          postId: "",
          id:'',
          page: 1,
          limit: 5,
          total: 0,
      };
  },

  methods: {
      //删除
      del(id) {
          del(id).then((res) => {
              if (res.code === 20000) {
                  this.$message({
                      message: "删除成功",
                      type: "success",
                  });
                  this.queryPsot();
              } else {
                console.log(res);
                
                  this.$message({
                      message: "删除失败",
                      type: "error",
                  });
              }
          });
      },
      handleClose(done) {
          this.$confirm("确认关闭？")
              .then(() => {
                  done();
              })
              .catch(() => { });
      },
      handleSizeChange(val) {
          this.page = 1;
          this.limit = val;
          this.queryPsot();
      },
      handleCurrentChange(val) {
          this.page = val;
          this.queryPsot();
      },
      resetParam() {
          this.postId = '';
          this.queryPsot();
      },
      //查询所有帖子
      queryPsot() {
          queryAll(this.page, this.limit, this.form).then((res) => {
              if (res.code === 20000) {
                  this.total = res.data.page.total;
                  this.parentAll = res.data.page.records;
              }
          });
      },
      queryId(){
        queryId(this.page,this.limit,this.postId).then((res) => {
            if(res.code === 20000){
                 this.parentAll = res.data.page.records
            }
        })
      }
  },
  mounted() {
      this.queryPsot();
  },
};
</script>

<style scoped></style>